<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/system/'}"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen"/>
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen"/>
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen"/>

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-2.1.0.min.js"></script>
    <!-- jQuery Configuration -->
    <script type="text/javascript"
            src="resources/scripts/simpla.jquery.configuration.js"></script>

    <!-- dialog弹出框的导入-->
    <link rel="stylesheet" href="resources/widget/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="resources/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>

    <!-- TODO 自定义ajax请求 -->
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mydialog.js'}"></script>

    <script th:inline="javascript">

        //删除终端信息
        function deleteClient(userid, status){
            if(status == 1){
                alert("不能删除在线终端！");
                return;
            }

            if(confirm("确定要删除当前终端信息吗？")){
                location.href = "/client/deleteByUserid?userid=" + userid
            }
        }

        //修改终端信息
        function updateInfo(userid) {

            //获得终端信息
            // $.post([[${#request.getContextPath()}]] + "/client/querybyid", {userid: userid}, function (data) {
            //     openDialog("update_div", "修改终端");
            // });

            //获得旧的名字
            var uname = $("#td_" + userid).html();
            $("#td_" + userid).html("<input id='updateinput_" + userid + "' style='width: 50px' type='text' value='" +  uname + "'/>");

            //获得焦点
            $("#updateinput_" + userid).select();
            $("#updateinput_" + userid).blur(function(){
                var value = $(this).val().trim();

                if(value == null || value.trim() == ""){
                    alert("终端名称不能为空！");
                    $("#td_" + userid).html(uname);
                    return;
                }

                //调用自定义ajax
                myajax({
                    url: [[${#request.getContextPath()}]] + "/client/updatename",
                    data: {uname: value, userid: userid},
                    success: function(data){
                        var name = uname;
                        if(data == 1){
                            name = value;
                        }
                        $("#td_" + userid).html(name);
                    }
                });
            });
        }


        //修改权限信息
        function updatePower(userid){
            //查询终端的权限名称
            $("#power_userid").val(userid);

            //清空
            // $("[name='checkbox']").removeAttr("checked");//取消全选
            var html = '';
            html += '<label>终端权限</label>';
            html += '<input type="checkbox" name="limits" value="2"/><span>视频对讲权限</span><br/>';
            html += '<input type="checkbox" name="limits" value="4"/><span>语音对讲权限</span><br/>';
            html += '<input type="checkbox" name="limits" value="8"/><span>自由模式视频权限</span><br/>';
            html += '<input type="checkbox" name="limits" value="16"/><span>自由模式语音权限</span><br/>';
            html += '<input type="checkbox" name="limits" value="32"/><span>主麦模式视频权限</span><br/>';
            html += '<input type="checkbox" name="limits" value="64"/><span>主麦模式语音权限</span><br/>';
            html += '<input type="checkbox" name="limits" value="128"/><span>循环监控</span><br/>';

            $("#powers_p").html(html);

            //调用自定义ajax
            myajax({
                url: [[${#request.getContextPath()}]] + "/client/querybyid",
                data: {"userid":userid},
                success: function(data){
                    var limits = data.limits;
                    if(limits != 0){
                        var limitsArray = JSON.parse(limits);
                        for(var i = 0; i < limitsArray.length; i++){
                            $("[type='checkbox'][name='limits'][value='" + limitsArray[i] + "']").attr("checked", true);
                        }
                    }
                    //弹出框
                    openDialog("update_div", "选择终端权限", 300, 400);
                }
            });
        }

        //修改权限
        function updatePowerSubmit(){
            //调用自定义ajax
            myajax({
                url: [[${#request.getContextPath()}]] + "/client/updatePower",
                data: $("#power_form").serialize(),
                success: function(data){
                    closeDialog("update_div");
                }
            });
        }

    </script>
</head>
<body>
<div id="main-content">
    <div class="content-box">
        <!-- End .content-box-header -->
        <div class="content-box-content">
            <h2>终端列表</h2>
             <!-- 搜索 -->
            <form th:action="${#request.getContextPath() + '/client/search'}" method="get">
                <input
                        class="text-input small-input" type="text" autocomplete="off"
                        name="keyword" placeholder="请输入终端ID或者终端名称" th:value="${keyword}"/>
                <button type="submit" class="mybutton">搜索</button>
            </form>

            <br/>
            <hr/>
            <br/>

            <div class="tab-content default-tab" id="tab1">
                <!--<form id="formid" method="post">-->
                <table>
                    <thead>
                    <tr>
                        <th>状态</th>
                        <th>终端id</th>
                        <th>终端名称</th>
                        <th>MAC地址</th>
                        <th>IP地址</th>
                        <th>软件版本</th>
                        <th>固件版本</th>
                        <th>操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr th:each="clientmsg : ${clientMsgList}">
                        <!--<td th:utext="${clientmsg.status == 1 ? '<font color=&#34;green&#34;>在线</font>' : '<font color=&#34;red&#34;>离线</font>'}">
                            <img th:src="${clientmsg.status == 1 ? 'resources/images/online.png' : 'resources/images/offline.png'}"/>
                        </td>-->
                        <td>
                            <img width="15px"
                                 th:src="${clientmsg.status == 1 ? '/commons/images/online.png' : '/commons/images/offline.png'}"/>
                        </td>
                        <td th:text="${clientmsg.userid}">Lorem ipsum dolor</td>
                        <td th:text="${clientmsg.terminalname}" th:id="${'td_' + clientmsg.userid}">Lorem ipsum dolor
                        </td>
                        <td th:text="${clientmsg.mac}">Lorem ipsum dolor</td>
                        <td th:text="${clientmsg.ip}">Lorem ipsum dolor</td>
                        <td th:text="${clientmsg.updateStatus}"></td>
                        <td th:text="${clientmsg.productsModel}"></td>
                        <td>
                            <a th:href="${'javascript:updateInfo(' + clientmsg.userid + ');'}" title="Edit"><img
                                    src="resources/images/icons/pencil.png" alt="Edit"/></a>
                            <a th:href="${'javascript:updatePower(' + clientmsg.userid + ');'}" title="Update"><img
                                    src="resources/images/icons/hammer_screwdriver.png" alt="Update"/></a>
                            <a th:onclick="|deleteClient(${clientmsg.userid}, ${clientmsg.status})|" title="Delete"><img
                                    src="resources/images/icons/cross.png" alt="Delete" /></a>
                            <!--<a
                                href="#" title="Delete"><img
                                src="resources/images/icons/cross.png" alt="Delete" /></a> <a
                                href="#" title="Edit Meta"><img
                                src="resources/images/icons/hammer_screwdriver.png"
                                alt="Edit Meta" /></a>-->
                        </td>
                    </tr>
                    </tbody>


                    <!-- 脚部 -->
                    <tfoot>
                    <tr>
                        <td colspan="6">
                            <div class="bulk-actions align-left">
                                <!-- <a class="mybutton" href="javascript:deletemeeting();">删除会议</a>-->
                            </div>
                            <!-- 分页导航 -->
                            <div class="pagination" th:replace="system/page :: fenye">
                            </div> <!-- End .pagination -->
                            <div class="clear"></div>
                        </td>
                    </tr>
                    </tfoot>
                </table>
                <!--</form>-->


            </div>
        </div>
        <!-- End .content-box-content -->
    </div>
</div>
<!-- End #main-content -->


<!-- 修改的弹出框 -->
<div id="update_div" style="display: none;">
    <div class="tab-content default-tab" id="tab2">
        <form id="power_form" method="post">
            <input type="hidden" name="userid" id="power_userid"/>
            <fieldset id="online">
                <p id="powers_p">

                </p>
            </fieldset>
            <fieldset>
                <p>
                    <button type="button" class="mybutton" onclick="updatePowerSubmit();">提交</button>
                </p>
            </fieldset>
            <div class="clear"></div>
        </form>
    </div>
</div>
</body>
</html>